<template>
  <div>
    <Table :columns="playColumns" :show-header="false" :data="playlist"></Table>
  </div>
</template>

<script>
import Enumerable from "linq";
import { mapActions, mapGetters } from "vuex";
export default {
  name: "playlist",
  data() {
    return {
      playColumns: [
        {
          title: "单曲",
          key: "name",
          render: (h, params) => {
            return h(
              "a",
              {
                on: {
                  click: () => {
                    var playlist = Enumerable.from(this.playlist);
                    this.setCurrentIndex(
                      playlist.indexOf(p => p.id == params.row.id)
                    );
                  }
                }
              },
              params.row.name
            );
          }
        },
        {
          title: "歌手",
          key: "artists",
          render: (h, params) => {
            var artists = params.row.artists;
            if (artists.length > 0) return h("span", artists[0].name);
            else return h("span", "未知");
          }
        },
        {
          title: "操作",
          key: "id",
          render: (h, params) => {
            return h("Button", {
              props: {
                type: "text",
                shape: "circle",
                ghost: false,
                icon: "ios-close"
              },
              on: {
                click: () => {
                  var playlist = Enumerable.from(this.playlist);

                  var currentMusic = this.currentMusic;
                  var currentIndex = this.currentIndex;

                  // 如果删除的是当前播放音乐，则跳到下一首或开始位置
                  if (currentMusic.id == params.row.id) {
                    if (currentIndex == playlist.count() - 1) {
                      this.setCurrentIndex(0);
                      // 删除当前音乐后，当前列表中音乐总数-1，索引不需修改
                    } else {
                    }
                  }
                  // 获取当前索引
                  // 如果当前索引大于等于待删除的索引，则将当前索引-1
                  else {
                    this.setCurrentIndex(currentIndex - 1);
                  }
                  playlist = playlist.where(p => p.id != params.row.id);
                  this.setPlaylist(playlist.toArray());
                }
              }
            });
          }
        }
      ]
    };
  },
  computed: {
    ...mapGetters(["currentMusic", "playlist", "currentIndex"])
  },
  methods: {
    ...mapActions(["setPlaylist", "setCurrentIndex"])
  }
};
</script>

<style>
</style>
